
<template>
  <div class="set_commission-container">
    <breadcrumb style></breadcrumb>
    <div class="content">
      <el-main>
        <div class="box">
          <el-row class="row">
            <el-col :span="3">
              <div class="grid-content bg-purple">抽奖商品</div>
            </el-col>

            <el-col :span="4">
              <div class="grid-content bg-purple-light">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadURL"
                  list-type="picture-card"
                  :headers="headers"
                  :on-success="handleSuccess"
                  :on-remove="handleRemove"
                  :on-preview="handlePreview"
                  :before-upload="handleChange5"
                >
                  <img
                    v-if="imageUrl1"
                    :src="imageUrl1"
                    class="avatar"
                    style="width:150px;height:150px;"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <!-- @click="select_goods" -->
                {{goodsims}}
                <el-button type="primary" @click=" select_goods()" disabled>点击选择</el-button>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple">
                <span></span>
              </div>
            </el-col>
          </el-row>
          <el-row class="row1">
            <el-col :span="1">
              <div class="grid-content bg-purple">活动发起方</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <el-input style="width:200px;" v-model="stuser" disabled></el-input>
              </div>
            </el-col>
            <el-col :span="1">
              <div class="grid-content bg-purple">奖品数量</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <el-input style="width:200px;" v-model="max" disabled></el-input>
              </div>
            </el-col>
          </el-row>
          <el-row class="row1">
            <el-col :span="1">
              <div class="grid-content bg-purple">活动名称</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <el-input v-model="name" style="width:200px;" disabled></el-input>
              </div>
            </el-col>

            <el-col :span="1">
              <div class="grid-content bg-purple-light">活动开始时间</div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple-light">
                <div class="inline-block" style="width:100px;">
                  <span class="demonstration"></span>
                  <el-date-picker
                    v-model="times"
                    type="datetime"
                    placeholder="选择日期"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    disabled
                  ></el-date-picker>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row1">
            <!-- <el-col :span="3">
              <div class="grid-content bg-purple">
                开奖方式
                <el-select placeholder v-model="status" style="width:100px;">
                  <el-option label="禁用" value="0"></el-option>
                  <el-option label="自动开奖" value="1"></el-option>
                  <el-option label="按人数开奖" value="2"></el-option>
                  <el-option label="手动开奖" value="3"></el-option>
                </el-select>
              </div>
            </el-col>-->
            <el-col :span="1">
              <div class="grid-content bg-purple">开奖方式</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <el-select placeholder v-model="status" style="width:200px;" disabled>
                  <el-option label="按人数开奖" value="2"></el-option>
                  <el-option label="按时间开奖" value="1"></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="1">
              <div class="grid-content bg-purple-light">开奖结束时间</div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple-light">
                <div class="block">
                  <span class="demonstration"></span>
                  <el-date-picker
                    v-model="endtime"
                    type="datetime"
                    placeholder="选择日期时间"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    @change="updateDate"
                    disabled
                  ></el-date-picker>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row1" v-if="status==2?true:false">
            <el-col :span="1">
              <div class="grid-content bg-purple">人数设置</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <el-input v-model="name4" style="width:200px;" disabled></el-input>
              </div>
            </el-col>
          </el-row>
          <el-row class="row1">
            <el-col :span="1">
              <div class="grid-content bg-purple">是否指定中奖人</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <el-select v-model="Appoint" style="width:200px;">
                  <el-option label="不配置" value="1"></el-option>

                  <el-option label="指定中奖用户" value="0"></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="1"  v-if="Appoint==1?false:true">
              <div class="grid-content bg-purple">中奖人选择</div>
            </el-col>
            <el-col :span="1" v-if="Appoint==1?false:true">
              <div class="grid-content bg-purple-light">
                <el-input v-model="user" style="width:100px;"></el-input>
              </div>
            </el-col>
            <el-col :span="1" v-if="Appoint==1?false:true">
              <div class="grid-content bg-purple">
                <el-button type="primary" style="width:70px;" @click=" getlist()">选择</el-button>
              </div>
            </el-col>
          </el-row>
          <el-row class="row1" v-if="this.iduser?true:false">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span v-for="item in this.iduser" :key="item">
                  <el-button type="text" @click="getr(item)">{{item}}删除</el-button>
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row class="row1">
            <el-col :span="1">
              <div class="grid-content bg-purple">指定性别</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <el-select v-model="gender" style="width:200px;" disabled>
                  <el-option label="男" value="1"></el-option>
                  <el-option label="女" value="0"></el-option>
                  <el-option label="不限" value="2"></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="1">
              <div class="grid-content bg-purple">地区限制</div>
            </el-col>
            <el-col :span="1">
              <div class="grid-content bg-purple-light">
                <el-select v-model="limits" style="width:100px;">
                  <el-option label="不限定" value="0"></el-option>
                  <el-option label="限定" value="1"></el-option>
                </el-select>
              </div>
            </el-col>
            <!-- <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-select
                  v-model="province2"
                  placeholder="请选择省"
                  @change="handleChange1(1)"
                  style="padding:0; width:100px;" disabled
                >
                  <el-option
                    v-for="item in provinces1"
                    :key="item.id"
                    :label="item.label"
                    :value="item.label"
                  ></el-option>
                </el-select>&nbsp;&nbsp;
                <el-select v-model="city2" placeholder="请选择市" @change="handleChange2(1)" style="width:100px;">
                  <el-option
                    v-for="item in citys1"
                    :key="item.id"
                    :label="item.label"
                    :value="item.label" disabled
                  ></el-option>
                </el-select>&nbsp;&nbsp;
                <el-select v-model="area2" placeholder="请选择区" style=" width:100px;">
                  <el-option
                    v-for="item in areas1"
                    :key="item.id"
                    :label="item.label"
                    :value="item.label" disabled
                  ></el-option>
                </el-select>
              </div>
            </el-col>-->
          </el-row>
          <el-row class="row1">
            <el-col :span="3">
              <div class="grid-content bg-purple">备注:</div>
            </el-col>
            <el-col :span="7">
              <div class="grid-content bg-purple">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="备注"
                  v-model="note"
                  style="width:500px;"
                ></el-input>
              </div>
            </el-col>
          </el-row>
        </div>

        <el-footer>
          <el-button type="primary" @click="set_commission">确 定</el-button>
          <el-button style="color: #409eff" @click="$router.go(-1)">取 消</el-button>
        </el-footer>
      </el-main>
    </div>
  </div>
</template>


<script>
import breadcrumb from "../../components/breadcrumb";
import { mapActions } from "vuex";
import {
  commission_set_see,
  commission_set_modify
} from "../../api/getData.js";
export default {
  components: { breadcrumb },
  data() {
    return {
      disabled: false,
      id1: 0, //修改的商品
      goodsId: this.$route.query.id || "",
      ids: this.$route.query.ids, //商品的id
      name: "", //活动名称
      goodsims: this.$route.query.id || "", //商品的名称
      imageUrl1: "", //抽奖的图片
      times: "", //活动开始时间
      status: "", //开奖方式
      endtime: "", //开奖结束时间
      minPeopleNum: "", //人数下限
      maxPeopleNum: "", //人数上限
      gender: "", //性别
      limits: "", //指定地区
      note: "", //备注
      user: "", //中奖用户
      Appoint: "", //是否指定中奖
      stuser: "", //活动发起方
      max: "", //奖品数量
      name4: "", //人数设置
      iduser: "", //指定中奖人
      provinces1: [],
      citys1: [],
      areas1: [],
      // 市
      provinces2: [],
      citys2: [],
      areas2: [],
      // 区
      province1: "",
      province2: "",
      city1: "",
      city2: "",
      area1: "",
      area2: "",
      uploadURL: this.upload_(),
      headers: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      }
    };
  },
  created() {
    this.get_commissiong_detail();
    this.goodsId = localStorage.getItem("id") || "";
    localStorage.removeItem("id");
    if (this.goodsId) {
      this.get_goodsDetail();
    }
    this.handleChange();
    let ids = "" || [];
    if (localStorage.getItem("ids")) {
      this.user = localStorage.getItem("ids");
      //   this.iduser=localStorage.getItem('iduser')
      //   //console.log(this.iduser)
      //  // this.iduser=this.iduser.split(',')
      //   localStorage.removeItem('iduser')
    }
  },
  methods: {
    ...mapActions(["save_address"]),
    updateDate: function(val) {
      //console.log("val:" + val);
      this.value1 = val;
      //console.log("this.value1:" + this.value1);
    },
    get_commissiong_detail() {
      //console.log(this.ids);
      var freeLuckySetId = this.ids;
      fetch(this.net_() + "/web_free_lucky/set/" + freeLuckySetId, {
        method: "get",
        headers: {
          Accept: "application/json;text/plain,*/*",
          "Content-Type": "application/json",
          Authorization: localStorage.getItem("token")
        }
      })
        .then(response => response.json())
        .then(data => {
          this.$message.success("获取成功");
          //console.log(data.data, "单个抽奖详情");
          this.name = data.data.goods.name;
          this.name4=data.data.luckySet.maxPeopleNum
          // //console.log(this.form2.name)
          this.imageUrl1 = data.data.goods.pricture;
          this.status = JSON.stringify(data.data.luckySet.type);
          this.limits = JSON.stringify(data.data.luckySet.limits);
          this.maxPeopleNum = data.data.luckySet.maxPeopleNum;
          this.minPeopleNum = data.data.luckySet.minPeopleNum;
          this.gender = JSON.stringify(data.data.luckySet.gender);
          this.note = data.data.luckySet.note;
          this.times = data.data.luckySet.startTime;
          this.endtime = data.data.luckySet.endTime;
          this.goodsId = data.data.goods.goodsId;
          this.goodsims = data.data.goods.name;
          this.stuser = data.data.luckySet.startName;
          this.max = data.data.goods.number;
          this.province2 = JSON.stringify(data.data.luckySet.province);
          this.city2 = JSON.stringify(data.data.luckySet.region);
          this.area2 = JSON.stringify(data.data.luckySet.town);
          if (data.data.luckySet.winId) {
            this.iduser = data.data.luckySet.winId.split(",");
          }
          let iduser = "" || [];
          if (localStorage.getItem("iduser")) {
            this.iduser = localStorage.getItem("iduser");
            this.iduser = this.iduser.split(",");
            //console.log(this.iduser);
            localStorage.removeItem("iduser");
          }
          //   let goodsId=data.data.goods.goodsId
          //    this.getgoods(goodsId)
          // this.getUser(row)
        });
    },
    // getgoods(goodsId){
    //  this.$axios.post('web_goods/get_one','id='+goodsId).then(res=>{
    //         //console.log(res)
    //         this.goodsims=res.data.data.goods.name
    //     })
    //},
    //请求省市地区
    handleChange(father = -1, level = 1) {
      // let data="father="+father+'&level='+level
      this.$axios
        .post("web_dict_address/get", "father=" + father + "&level=" + level)
        .then(result => {
          if (result.data.status == 0) {
            result.data.data.forEach(item => {
              this.provinces1.push({
                label: item.name,
                id: item.id
              });
              this.provinces2.push({
                label: item.name,
                id: item.id
              });
            });
          }
        });
    },
    get_city_area(type) {
      let id = "";
      let city = "";
      if (type == 1) {
        let province = this.province1;
        city = this.city1;
        this.provinces1.forEach(item => {
          if (item.label == province) {
            id = item.id;
          }
        });
      } else {
        let province = this.province2;
        city = this.city2;

        this.provinces2.forEach(item => {
          if (item.label == province) {
            id = item.id;
          }
        });
      }

      this.$axios
        .post("web_dict_address/get", "father=" + id + "&level=" + 2)
        .then(result => {
          if (result.data.status == 0) {
            result.data.data.forEach(item1 => {
              if (type == 2) {
                this.citys1.push({ label: item1.name, id: item1.id });
              } else {
                this.citys2.push({ label: item1.name, id: item1.id });
              }
              if (item1.name == city) {
                let id = item1.id;
                this.$axios
                  .post("web_dict_address/get", "father=" + id + "&level=" + 3)
                  .then(result => {
                    if (result.data.status == 0) {
                      result.data.data.forEach(item2 => {
                        if (type == 2) {
                          this.areas1.push({
                            label: item2.name,
                            id: item2.id
                          });
                        } else {
                          this.areas2.push({
                            label: item2.name,
                            id: item2.id
                          });
                        }
                      });
                    }
                  });
              }
            });
          }
        });
    },
    handleChange1(type) {
      // type 用来判断是收货信息中的地址， 还是售后中的地址'
      let id = "";
      if (type == 1) {
        this.city2 = "";
        this.area2 = "";
        this.citys1 = [];
        this.areas1 = [];

        this.provinces1.forEach(item => {
          if (item.label == this.province2) {
            id = item.id;
          }
        });
      } else {
        this.city1 = "";
        this.area1 = "";
        this.citys2 = [];
        this.areas2 = [];
        this.provinces2.forEach(item => {
          if (item.label == this.province1) {
            id = item.id;
          }
        });
      }

      this.$axios
        .post("web_dict_address/get", "father=" + id + "&level=" + 2)
        .then(result => {
          if (result.data.status == 0) {
            result.data.data.forEach(item => {
              if (type == 1) {
                this.citys1.push({ label: item.name, id: item.id });
              } else {
                this.citys2.push({ label: item.name, id: item.id });
              }
            });
          }
        });
    },
    //请求市区
    handleChange2(type) {
      let id = "";
      if (type == 1) {
        this.areas1 = [];
        this.area2 = "";
        this.citys1.forEach(item => {
          if (item.label == this.city2) {
            id = item.id;
          }
        });
      } else {
        this.areas2 = [];
        this.area1 = "";
        this.citys2.forEach(item => {
          if (item.label == this.city1) {
            id = item.id;
          }
        });
      }
      this.$axios
        .post("web_dict_address/get", "father=" + id + "&level=" + 3)
        .then(result => {
          if (result.data.status == 0) {
            result.data.data.forEach(item => {
              if (type == 1) {
                this.areas1.push({ label: item.name, id: item.id });
              } else {
                this.areas2.push({ label: item.name, id: item.id });
              }
            });
          }
        });
    },
    handleSuccess(response, file, fileList) {
      //console.log(response, "1");
      //这个是奖品图片地址
      // //console.log(file.url);
      // //console.log(fileList,'fileList')
      this.imageUrl1 = response;
    },
    //移除图片的监听事件
    handleRemove() {},
    handlePreview() {},
    handleChange5() {},
    //跳转商品选择页面
    select_goods() {
      this.$router.push("/selectGoods");
    },
    //根据id查询商品信息
    get_goodsDetail() {
      this.$axios.post("web_goods/get_one", "id=" + this.goodsId).then(res => {
        //console.log(res);
        this.goodsims = res.data.data.goods.name;
        this.goodsId = res.data.data.goods.id;
      });
      this.getlists();
    },
    getlists() {},
    //提交修改的信息
    set_commission() {
      if (this.iduser) {
        //判断指定中奖用于是否有数据
        var winId = this.iduser.join(",");
      }
      let data = {
        goods: {
          //   bannerUrl: this.imageUrl1,
          pricture: this.imageUrl1,
          name: this.name,
          id: this.ids,
          goodsId: this.goodsId
        },
        luckySet: {
          maxPeopleNum: this.maxPeopleNum,
          minPeopleNum: this.minPeopleNum,
          province: this.province2,
          region: this.city2,
          town: this.area2,
          startTime: this.times,
          type: this.status,
          note: this.note,
          // // luckySetVo:luckySetVo,
          // endTime: JSON.stringify(this.form.value3),
          // endTime: JSON.parse(this.form1.value3),
          endTime: this.endtime,
          id: this.ids,
          gender: this.gender,
          limits: this.limits,
          winId: winId,
          number: this.max,
          startName: this.stuser
        }
      };
      //console.log(data);
      this.$axios.post("/web_free_lucky/update_set", data).then(res => {
        //console.log(res);
        if (res.data.status !== 200) {
          if (res.data.status == 0) {
            this.$router.push("/freeLotteryAdd");
            return this.$message({
              type: "success",
              message: "操作成功"
            });
          } else {
            return this.$message({
              type: "warning",
              message: "修改数据失败"
            });
          }
        }
      });
    },
    getlist() {
      this.$router.push("/goodsusers");
    },
    getr(item) {
      this.iduser.pop(item);
    }
  }
};
</script>



<style lang="less" >
.set_commission-container {
  @import "../../style/card.less";
  display: flex;
  flex-flow: column;
  height: 100%;
  .price {
    width: 70px !important;
    .el-input__inner {
      width: 70px !important;
    }
  }
  .el-collapse-item {
    .el-collapse-item__content {
      padding-left: 45px;
      display: flex;
      .el-form {
        width: 310px;
        display: flex;
        flex-direction: column;
        margin-right: 85px;
        .el-form-item {
          margin-bottom: 30px !important;
        }
      }
    }
  }
  .box {
    // background-color: #eee;
    margin: 15px 0;
  }
  .box > .row {
    font-size: 22px;
    font-weight: 700;
  }
  .box > .row1 {
    margin: 20px 0;
    font-size: 14px;
    font-weight: 400;
  }
  .box > .row1 .el-input__inner {
    // width: 40px;
    height: 30px;
    padding-left: 30px!important;
  }
  .box > .row span {
    display: inline-block;
    // color: red;
  }
  .el-row {
    // margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    min-width: 110px;
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    line-height: 36px;
    min-width: 40px;
  }
  .row-bg {
    // padding: 10px 0;
    background-color: #f9fafc;
  }
}
</style>
